<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<%@ include file="/static/include/common.inc"%>
<title>青州市名卡管理系统</title>
<link rel="shortcut icon"
	href="https://github.com/shuaijunlan/Autumn-Framework/raw/master/favicon.ico"
	type="image/x-icon" />
<link rel="stylesheet" href="static/admin/css/layui.css">
<link rel="stylesheet" href="static/layui_v2.2.3/css/zbyui.css">
<link rel="stylesheet" href="static/admin/css/main.css" media="all">
<script src="static/js/jquery-1.11.2.js"></script>
<script src="static/layui_v2.2.3/layui.js" charset="utf-8"></script>
</head>
<body>
	<ul class="layui-tab-title">
    	<li class="layui-this">底部导航管理</li>
  	</ul>
	<div class="layui-tab-content">
		<div class="layui-tab-item layui-show" style="margin: 10px">
			<form class="layui-form" action="">
				<input name="id" value="${bottomNav.id }" id="id" style="display: none;">
				<div class="layui-form-item">
					<label class="layui-form-label">版权</label>
					<div class="layui-input-block">
						<input type="text" name="copyright" required lay-verify="required"
							placeholder="请输入版权信息（如：）" autocomplete="off"
							class="layui-input" value="${bottomNav.copyright }">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">主管单位</label>
					<div class="layui-input-block">
						<input type="text" name="manageOrganization" required lay-verify="required"
							placeholder="请输入版权信息" autocomplete="off" class="layui-input" value="${bottomNav.manageOrganization }">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">服务热线</label>
					<div class="layui-input-block">
						<input type="text" name="hotline" required lay-verify="required"
							placeholder="请输入版权信息" autocomplete="off" class="layui-input" value="${bottomNav.hotline }">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">在线客服</label>
					<div class="layui-input-block">
						<input type="text" name="onlineService" required lay-verify="required"
							placeholder="请输入版权信息" autocomplete="off" class="layui-input" value="${bottomNav.onlineService }">
					</div>
				</div>
				<div class="layui-form-item"
					style="height: 100px; margin-top: 40px;" id="zby-item">
					<label class="layui-form-label">上传logo</label>
					<div class="layui-input-block">
						<input type="file" style="display: none;" id="zby-upload">
						<input type="hidden" name="logoUrl" value="${bottomNav.logoUrl }" lay-verify="required" id="logoUrl">
						<img id="zby-img" alt="" src="${not empty bottomNav.logoUrl? bottomNav.logoUrl:'static/admin/img/user_edit.png'}" 
							style="height: 90px; width: 100px; border: 2px solid #000;">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript">
		layui.use([ 'form' ], function() {
			var form = layui.form;
			//监听提交
			form.on('submit(formDemo)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				$(".layui-btn").addClass("layui-btn-disabled")
				$.ajax({
					type : "post",
					url : "admin/bottomnav/addAndUpdateBottomNav.do",
					data : data.field,
					async: false,
					success : function(result) {
						if (result.code == 1) {
							layer.msg(result.msg);
							setTimeout(flushCurrentPage,100);
						} else {
							layer.msg(result.msg);
						}
						
					}
				});
				return false;
			});
		});
		function flushCurrentPage() {
			window.location.reload();
		}
		
		$("#zby-img").bind("click", function() {
			$("#zby-upload").click();
		})
		var formData;
		$("#zby-upload").bind("change", function() {
			formData = new FormData();
			console.log(this.files[0])
			for(var i=0;i<this.files.length;i++){
				checkImg(this.files[i].name);
				formData.append("files"+i,this.files[i]);
			}
			// 创建 一个FileReader对象
    		var reader = new FileReader();
    		// 读取文件作为URL可访问地址
    		reader.readAsDataURL(this.files[0]);
    		reader.onload=function(e){
				$("#zby-img").attr("src",e.target.result)
				//$("#zby-upload").val(e.target.result)
    		}
    		//return false;
    		$.ajax({
				type : "post",
				url : "front/image/manyFileUpload.do",
				data : formData,
				async: false,
				processData: false,  // 告诉jQuery不要去处理发送的数据
	            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
				success : function(result) {
					if (result.code == 1) {
						//layer.msg(result.msg);
						$("#logoUrl").val(result.path)
					} else {
						//layer.msg(result.msg);
					}
				}
			}); 
		})
		
		function checkImg(imgName){
			var index= imgName.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
			img_id=imgName.substring(index); //截断"."之前的，得到后缀
    		if(img_id!=".bmp"&&img_id!=".png"&&img_id!=".gif"&&img_id!=".jpg"&&img_id!=".jpeg"){  //根据后缀，判断是否符合图片格式
          		alert("不是图片格式,重新选择"); 
         		document.getElementById('movie_img').value="";  // 不符合，就清除，重新选择
      		}
 		}

		
	</script>
</body>
</html>